<template>
	<div>

		<view>
			<u-navbar :is-back="false" :title="title" :title-color="color" :background="background">
			</u-navbar>
		</view>

		<view class="wrap">
			<u-swiper class="wrap2" height="400" :list="list" mode="dot" indicator-pos="bottomRight" :effect3d="true"></u-swiper>
		</view>
		<view class="age">
			<u-search placeholder="请输入姓名" v-model="keyword" @custom="search" @search="search"></u-search>
		</view>

		<view class="age">
			<u-table>
				<u-tr class="u-tr">
					<u-th class="u-th">姓名</u-th>
					<u-th class="u-th">年龄</u-th>
					<u-th class="u-th">籍贯</u-th>
					<u-th class="u-th">性别</u-th>
				</u-tr>
				<u-tr class="u-tr" v-for="(user,index) in $store.state.userList" :key="index">
					<u-td class="u-td">{{user.name}}</u-td>
					<u-td class="u-td">{{user.age}}</u-td>
					<u-td class="u-td">{{user.address}}</u-td>
					<u-td class="u-td">{{user.gender}}</u-td>
				</u-tr>
			</u-table>
		</view>

		<view class="text-area">
			<text class="title">{{userName}}</text>
		</view>

		<view class="page">
			<child title='这是父组件传给子组件的值' @onFather='onFather'></child>
		</view>
		<view class="text-area">
			<button @click="tiaozhuan">跳转</button>
		</view>
	</div>

</template>

<script>
	import {
		mapGetters
	} from 'vuex'
	import child from '@/pages/cat/cat.vue'

	export default {

		components: {
			child
		},
		data() {
			return {
				// userList: store.state.userList
				userName: '我是父组件中的值',
				keyword: '',
				title: '首页',
				color: '#ffffff',
				background: {
					// backgroundColor: '#001f3f',

					// 导航栏背景图
					// background: 'url(https://cdn.uviewui.com/uview/swiper/1.jpg) no-repeat',
					// 还可以设置背景图size属性
					// backgroundSize: 'cover',
					// 渐变色
					backgroundImage: 'linear-gradient(45deg, rgb(28, 187, 180), rgb(141, 198, 63))'
				},
				list: [{
						image: 'http://chenvafile.obs.cn-north-1.myhuaweicloud.com/project/1602571662990/6.637379506536578.jpg',
						title: '昨夜星辰昨夜风，画楼西畔桂堂东'
					},
					{
						image: 'http://chenvafile.obs.cn-north-1.myhuaweicloud.com/project/1602663044068/7.51337780973095.jpg',
						title: '身无彩凤双飞翼，心有灵犀一点通'
					},
					{
						image: 'http://chenvafile.obs.cn-north-1.myhuaweicloud.com/project/1602571686200/6.842095390903344.jpg',
						title: '谁念西风独自凉，萧萧黄叶闭疏窗，沉思往事立残阳'
					}
				],
			}
		},
		onLoad() {
			// this.$u.api.getSearch({

			// }).then(res => {

			// });

			let bar = {
				a: 1,
				b: 2
			};
			let baz = {
				...bar
			}; // { a: 1, b: 2 }

			console.log(baz.a)

		},
		// computed和methods的区别为在<text class="age">{{getAge}}</text> 
		// 中使用方法getAge，computed不用添加括号，methods则需要添加括号getAge()
		computed: {
			...mapGetters(['getAge', 'getUserList'])
		},
		methods: {
			// ...mapGetters(['getAge'])
			search: function() {
				let myKeyWord = this.keyword;

				var myUserList = [];

				let userList = this.$store.getters.getUserList;

				if (myKeyWord != undefined && myKeyWord != '') {
					for (var x = 0; x < userList.length; x++) {
						let user = userList[x];
						let userName = user.name;
						if (userName == myKeyWord) {
							myUserList.push(user);
						}

					}
					this.$store.commit('setUserList', myUserList)
				} else {
					this.$store.commit('setUserList', userList)
				}
			},
			onFather: function(e) {
				console.log('父组件中的信息：' + e);
			},
			tiaozhuan: function() {
				// 非tabBar界面 可以跳转
				uni.navigateTo({
					url: '/pages/dog/dog?id=11111'
				})
				
				// tabBar界面 不可以跳转
				// uni.navigateTo({
				// 	url: '/pages/home/home/home'
				// })
				
				// 可以跳转
				// this.$router.push({
				// 	path: '/pages/home/home/home'
				// })
				// this.$router.replace({
				// 	path: '/pages/dog/dog',
				// 	query: {
				// 		id: 2222
				// 	}
				// })
				
				// 跳转tabBar界面只能使用 switchTab
				// uni.switchTab({
				// 	url:'/pages/home/home/home'
				// })
				
				
			},
		}
	}
</script>

<style>
	.content {

		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;
	}

	.text-area {
		display: flex;
		justify-content: center;
	}

	.title,
	.age {
		font-size: 36rpx;
		color: #8f8f94;
		margin-bottom: 10rpx;
	}

	.wrap {
		padding: 1rpx;

	}

	.wrap2 {
		/* height: 300px!important; */
		background-color: rgb(243, 244, 246);
	}

	.wrap2 uni-swiper {
		height: 300px !important
	}
</style>
